import { defineComponent, reactive, ref } from "vue";
import styles from "./PersInsureDetail.module.less";
import Breadcrumb from "@/components/public/Breadcrumb/Breadcrumb";
import { useRouter } from "vue-router";
import PerDetailContent from "./components/PerDetailContent/PerDetailContent";
import Detail from "./components/Detail/Detail";
export default defineComponent({
  setup() {
    const router = useRouter();

    const state = reactive({
      name: '全球签证旅游保险（互联网专属）方案一',
      plan_name: '方案一',
      earmarks: ['意外伤害', '医疗费用', '救护车费用', '住院津贴'],
      count: 1,
      start_date: '',
      end_date: '',
      is_collect: 0,
    })

    const breadcrumbState = ref([
      () => <span class={styles['Breadcrumb-Home']} onClick={() => { router.push('/home') }}>首页</span>,
      () => <span class={styles['Breadcrumb-PersInsureList']} onClick={() => { router.push('/PersInsureList') }}>特色保险</span>,
      () => <span class={styles['Breadcrumb-PersInsureDetail']}>{state.name}</span>,
    ])

    return () => (
      <div class={styles.PersInsureDetail}>
        <Breadcrumb list={breadcrumbState.value} />
        <PerDetailContent v-model:state={state} />
        <Detail />
      </div>
    )
  }
})